<template>
  <!-- <div class="WarningCenter card-bg">
    <el-table :data="tableData" style="width: 100%" height="calc(100% - 50px)">
      <el-table-column
        prop="Level"
        label="等级"
        width="60"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="Pos"
        label="小区"
        width="100"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="Msg" label="预警内容" show-overflow-tooltip>
      </el-table-column>
      
    </el-table>
  </div> -->
  <div class="scroll_table WarningCenter card-bg">
    <div style="display: inline-block; width: 100%">
      <div class="card-title">预警中心</div>
      <el-table :data="tableList" class="table">
        <el-table-column
          v-for="(item, index) in columns"
          :key="index + 'i'"
          :label="item.label"
          :prop="item.prop"
        />
      </el-table>
      <vue-seamless-scroll
        :data="tableList"
        class="seamless-warp"
        style="width: 100%"
        :class-option="classOption"
      >
        <el-table :data="tableList" class="table_scroll">
          <el-table-column
            v-for="(item, index) in columns"
            :key="index + 'i'"
            :label="item.label"
            :prop="item.prop"
          />
        </el-table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import { rtWarning } from "@/api/panoramicData";

export default {
  created() {
    this.runRtWarning();
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: this.tableList.length, // 开始无缝滚动的数据量 this.tableList
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      columns: [
        { prop: "Level", label: "等级", minWidth: "60" },
        { prop: "Pos", label: "小区", minWidth: "100" },
        { prop: "Msg", label: "预警内容" },
      ],
      tableList: [],
    };
  },
  methods: {
    runRtWarning() {
      rtWarning().then((res) => {
        this.tableList = res.data || [];
      });
      setInterval(() => {
        rtWarning().then((res) => {
          this.tableList = res.data || [];
        });
      }, 1800000);
    },
  },
};
</script>
<style lang="scss" scoped>
.scroll_table {
  display: flex;
  ::v-deep .table .el-table__body-wrapper {
    display: none;
  }
  // 重点注意这段样式
  .seamless-warp {
    height: 200px;
    overflow: hidden;
    ::v-deep .table_scroll .el-table__header-wrapper {
      display: none;
    }
  }
}
.WarningCenter {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
::v-deep.el-table tr,
::v-deep .el-table__cell,
::v-deep.el-table,
::v-deep.el-table__expanded-cell {
  background-color: transparent !important;
  border-bottom: 0px !important;
  color: #ffffff;
}
::v-deep.el-table::before {
  z-index: -1;
}
::v-deep.el-table th {
  color: #159aff !important;
  background-color: rgba(71, 144, 229, 0.2) !important;
  padding: 4px 0px !important;
}
</style>
